<template>
  <div class="container" >
    <!-- :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain',backgroundRepeat: 'no-repeat',backgroundSize: '1000% 1000%', backgroundPosition:'center center' }" -->
    <img :src="coverImgUrl||baseImg" alt="" class="background">
    <div class="header-song space-between">
        <div class="back" @click="goBack"><img :src="back" alt="" class="back"></div>
         <!-- <div class="song-mes-tit center" > -->
            <p class="title color-f fs-36">{{songMes.music_name}}</p>
            <!-- <p class="txt" v-if="!isShowImg">{{songMes.singer_artistic_name}}</p> -->
          <!-- </div> -->
        <img :src="share" alt="" class="share">
    </div>
    <!-- 展示歌手图片 -->
    <div class="main" v-if="isShowImg">
      <div class="song-pic center"   @click="lookWords">
          <img :src="songMes.background" alt="" :class="isPlay?'square':''">
      </div>
      <div class="song-mes">
        <p class="title color-f fs-36">{{playingLyric}}</p>
        <p class="txt color-f">
          <!-- 的如何发挥 -->
          {{songMes.singer_artistic_name}}
          </p>
      </div>
      
    </div>
    <!-- 展示歌词详情的 -->
    <!-- @touchstart.prevent="middleTouchStart" @touchmove.prevent="middleTouchMove" @touchend="middleTouchEnd" -->
    <div class="middle" v-else @click="lookSingerImg">
      <!--歌词滚动-->
      <scroll class="middle-r" ref="lyriclist" :data="currentLyric && currentLyric.lines"   >
        <div class="lyric-wrapper">
          <div v-if="currentLyric">
            <p ref="lyricLine" 
              class="text" 
              v-for="(line, index) in currentLyric.lines" 
              :key="line.key"
              :class="{'current': currentLineNum === index}"
            >
              {{line.txt}}
            </p>
          </div>
        </div>
      </scroll>
    </div>
    <audio :src="songMes.music_url"  ref="player" id="music" :loop='isloop'></audio>
    <div class="icons space-between" v-if="isShowImg">
        <img :src="love" alt="">
        <img :src="comment" alt="">
        <div><img :src="downLoad" alt=""><img v-show="isPayment" class="vip" :src="vip"/></div>
        <img :src="more" alt="">
    </div>
    <div class="bottom ">
      
      <div class="progress space-between">
        <!-- <div class="progress-light"  v-bind:style="{ width:this.audioRange}"></div> -->
        <span class="left">{{playTime}}</span>
        <div class="progress-bar-wrapper">
          <progress-bar :currentTime="currentTime"  :alltime='allTimes' @fn="getpercent"></progress-bar>
        </div>
          
        <span class="right">{{allTime}}</span>
      </div>
      <div class="playbtn space-between">
        <img :src="shunxu" alt="" @click.stop="tochecktype" v-if="ind==1">
        <img :src="suiji" alt="" @click.stop="tochecktype" v-if="ind==2">
        <img :src="loop" alt="" @click.stop="tochecktype" v-if="ind==3">
        <img :src="playLeft" alt="">
        <img v-if="!isPlay" :src="playMusic" @click="play" alt="">
        <img v-else :src="noplayMusic" @click="play" alt="">
        <!-- <img v-else @click="play" alt=""> -->
        <img :src="playRight" alt="">
        <img :src="musicList" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import Lyric from 'lyric-parser'
export default {
  name: 'son-detail',
  data () {
    return {
      isShowImg:true,
      isPayment:false,
      isPlay:false,
      title:'歌曲详情',
      isloop:false,
      checktype:false,
      type:1,
      currentLyric: null,
      currentLineNum:0,
      playingLyric:'歌词',
      line:{},
      coverImgUrl:'',
      baseImg:require("../../assets/account/singerbg.png"),
      back:require('@/assets/index/back.png'),
      share:require('@/assets/index/musicshare.png'),
      //songPic:require('@/assets/index/song-pic.png'),
      love:require('@/assets/index/sc.png'),
      comment:require('@/assets/index/chatmusic.png'),
      downLoad:require('@/assets/index/down.png'),
      more:require('@/assets/index/moremusic.png'),
      loop:require('@/assets/index/loop.png'),
      shunxu:require('@/assets/index/shunxu.png'),
      suiji:require('@/assets/index/suiji.png'),
      playLeft:require('@/assets/index/Prev.png'),
      playMusic:require('@/assets/index/Playmusic.png'),
      noplayMusic:require('@/assets/index/zanting.png'),
      //playPause:require('@/assets/index/Playmusic.png'),
      playRight:require('@/assets/index/Next.png'),
      musicList:require('@/assets/index/list.png'),
      vip:require('@/assets/index/vip.png'),
      count:180,
      timeNum:0,
      flag:true,
      songList:[],
      playTime:'00:00',
      allTime:'00:00',
      audiourl:'http://the-store-bucket.oss-cn-shanghai.aliyuncs.com/逆态度-张杰.mp3',
      closeClock:false,  //关掉定时器
      audioRange:0,//音频进度条
      currentSrc:'img',//音频文件名
      currentTime:0,//进度条当前播放的时间
      allTimes:0,
      songMes:{},
      music_id:1,//音乐id
      music_from:1,//歌曲来自哪里
      song_sheet_id:1,//歌单id
      duration:11,//音乐总时长
      ind:1,
      currentLyric: null, // 封装后的歌词对象
      currentLineNum: 0, // 当前下显示歌词行数
      playingLyric: "" // 当前cd页显示歌词
    }
  },
  components:{
    //Scroll
  },
  watch:{
    isPlay(){
      if(this.isPlay){
        //console.log('在播放')
        this.currentLyric.play();
      }else{
        this.currentLyric.stop()
        //console.log('没播放')
      }
    }
  },
  
  created(){
    this.music_id = this.$route.query.music_id;
    this.music_from = this.$route.query.music_from;
    this.song_sheet_id = this.$route.query.song_sheet_id;
    this.getSongMes()
    this.getWords();
    this.cellect()
    //this.play()
  },
  methods:{
    // 返回上一页
    goBack(){
      this.$router.go(-1);
    },
    // 获取歌曲信息数据
    getSongMes(){
      //console.log(this.music_from);
      if(this.music_from == 3){
        var url = this.$host1 + `home/musicMainMsg?music_id=`+this.music_id+'&music_from='+this.music_from+'&song_sheet_id='+this.song_sheet_id;
      }else{
        var url = this.$host1 + `home/musicMainMsg?music_id=`+this.music_id+'&music_from='+this.music_from;
      }
      // const url = this.$host1 + `home/musicMainMsg?music_id=`+this.music_id;
      this.$axios.get(url).then(res=>{
        //console.log(res.data.data,'---res.data.data--');
      if(res.data.code == 200){
        var resData=res.data
        this.songMes = resData.data
        this.coverImgUrl= resData.data.background
        console.log(this.songMes)
      }else if(res.data.code == 0){
            this.AlertWin(res.data.data.message);
          }else{
        this.AlertWin(res.data.message);
      }
      }).catch(err=>{
        console.log(err,'err-----');
      });
    },
    // 查看歌曲是否收藏
    cellect(){
      var data={
        mix_id:this.music_id,
        type:4
      }
      var url = this.$host1 + `home/IsCollect`
      this.$axios.post(url,data).then(res=>{
        console.log(res);
      if(res.data.code == 200){
        var resData=res.data
        console.log(resData)
        //this.songMes = resData.data
        //this.coverImgUrl= resData.data.background
        //console.log(this.songMes)
      }else{
        //this.AlertWin(res.data.message);
      }
      }).catch(err=>{
        console.log(err,'err-----');
      });
    },
    // 切换至歌词页面
    lookWords(){
      this.isShowImg = false;
      //this.getWords();
    },
    // 切换至歌手图片页面
    lookSingerImg(){
      this.isShowImg = true;
    },
    // 播放音乐
    play(){
      this.isPlay = !this.isPlay;
      if(this.isPlay){
        //console.log('00000');
        this.$refs.player.play();
        this.playControl();
      }else{
        //console.log('999');
        this.$refs.player.pause();
      }
      
    },
    playControl() {
      var audio = document.getElementById('music');
      if (this.isPlay) {
        
        this.timer = setInterval(() => {
            if(audio == null)
            {
                audio = document.getElementById('music');
                //console.log(audio.duration)
            }
            var allTime=parseInt(audio.duration)
            
            var allM =  parseInt(allTime/60%60);
            var allS =  parseInt(allTime%60);
            if(allM < 10 && allS < 10){
              this.allTime = '0' + allM + ':' + '0' + allS;
            }else if(myM < 10){
              this.allTime = '0' + allM + ':' + allS;
            }else{
              this.allTime = allM + ':' + allS;
            }
            //console.log(allM)
            this.audioRange = parseInt((audio.currentTime / audio.duration) * 100) + '%';
            this.currentTime = parseInt(audio.currentTime);
            this.allTimes=parseInt(audio.duration)
            this.currentSrc = audio.currentSrc;
            this.currentLyric.seek(audio.currentTime * 1000)
            //console.log(this.currentSrc,'--this.currentSrc');
            // console.log(audio.ended,'=====audio.ended');
            if(audio.ended){
              this.currentLyric.stop()
              this.isPlay = false;//如果音频已经播放完毕  就把播放按钮显示出来
            }
            //console.log(this.currentTime);
            this.playTime = parseInt(audio.currentTime)*1000;
            var myM =  parseInt(this.playTime/1000/60%60);
            var myS =  parseInt(this.playTime/1000%60);
            if(myM < 10 && myS < 10){
              this.playTime = '0' + myM + ':' + '0' + myS;
            }else if(myM < 10){
              this.playTime = '0' + myM + ':' + myS;
            }else{
              this.playTime = myM + ':' + myS;
            }
            // console.log(this.playTime,'---this.playTime');
        }, 1000);
      }
    },
    // 获取歌词
    getWords(){
      var data={
        music_id:this.music_id
      }
      const url = this.$host1 + `home/changeMusicLyrics`;
      this.$axios.post(url,data).then(res=>{
        //console.log(res,'---res.data--');
        if(res.status == 200){
          var resData=res.data
          //var obj={}
          this.currentLyric = new Lyric(resData, this.handleLyric)
           if (this.isPlay) {
             //console.log('在播放')
            // 如果此时正在播放则歌词也开始播放
            this.currentLyric.play();
          }
          //console.log(this.currentLyric)
        }else{
          this.AlertWin(res.data.msg);
        }
      }).catch(err=>{
        console.log(err,'err-----');
      });
    },
    handleLyric({lineNum, txt}) {
      this.currentLineNum = lineNum
      if(this.isShowImg==false){
        if (lineNum > 5) {
          let lineEl = this.$refs.lyricLine[lineNum - 5]
          this.$refs.lyriclist.scrollToElement(lineEl, 1000)
        } else {
          this.$refs.lyriclist.scrollTo(0, 0, 1000)
        }
      }
      this.playingLyric = txt
      //console.log(this.playingLyric)
    },
    getpercent(percent){
      var now = this.allTimes*(parseInt(percent))
      var myM =  parseInt(now/100/60%60);
      var myS =  parseInt(now/100%60);
      if(myM < 10 && myS < 10){
        this.playTime = '0' + myM + ':' + '0' + myS;
      }else if(myM < 10){
        this.playTime = '0' + myM + ':' + myS;
      }else{
        this.playTime = myM + ':' + myS;
      }
      var audio = document.getElementById('music');
      this.currentTime=now/100
      audio.currentTime=parseInt(this.currentTime)
      // 点击或滑动 歌曲进度条 歌词滚动到对应的位置
        if (this.currentLyric) {
          this.currentLyric.seek(this.currentTime * 1000)
        }
      //console.log(parseInt(this.currentTime))
    },
    // 播放模式切换
    tochecktype(){
      this.ind++
      if(this.ind>3){
        this.ind=1
      }
      console.log(this.ind)
      if(this.ind==3){
        this.isloop=true
      }
    },
    
    
  },
  
  mounted(){
    const that = this;
        window.onclick = () => {
            return (() => {
                that.checktype=false
            })()
        }
    // setTimeout(()=>{
    //   this.play()
    // },500)
    var test2 = setInterval(()=>{
      if(this.count/180%180 == 0){
      this.count+=180;
      }
    },1000)

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@keyframes
 rotate{
    from{
       transform:rotate(0deg); -webkit-transform:rotate(0deg); 
       transform-origin: center;
    }to{ 
      transform:rotate(360deg); -webkit-transform:rotate(360deg);
      transform-origin: center;
    }
 }
 .square{
  animation:rotate infinite linear 10s;
  -webkit-animation:rotate infinite linear 10s;
 -moz-animation:rotate infinite linear 10s;
}
.container{
    overflow: hidden;
    //filter: blur(20px);
    width: 100%;
    height: 100vh;
    position: absolute;
    .background{
      width: 150%;
      height: 150%;
      z-index: -1;
      margin-left: -1rem;
      margin-top: -1rem;
      position: absolute;
      filter: blur(0.7rem);
    }
    .header-song{
      padding: 0 0.24rem;
      box-sizing: border-box;
      height: 1.3rem;
      width: 100%;
      //background-color: greenyellow;
      .back{
        width: 0.46rem;
        height: 0.46rem;
        img{
          width: 0.15rem;
          height: 0.26rem;
        }
        // img{
        //   transform: rotate(-180deg);
        // }
      }
      img{
        width: 0.46rem;
        height: 0.46rem;
      }
    }
    // 歌手图片
    .main{
      height: calc(100% - 4rem);
      width: 100%;
      position: relative;
      padding-bottom: 2.2rem;
      box-sizing: border-box;
      margin-top: 0.5rem;
      //background-color: pink;
      .song-pic{
      //background-color: greenyellow;
      position: relative;
      //padding-top: 0.5rem;
      width: 4.9rem;
      height: 4.9rem;
      box-sizing: border-box;
      margin: 0.2rem auto 0;
      //border-radius: 50%;
      // background: url('../../assets/index/progress.png') no-repeat;
      background-size: 5.48rem;
        .light{
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #7408B4;
          left: 0;
          top: 0;
        }
        .box{
          width: 5.37rem;
          height: 5.37rem;
          position: absolute;
          background-color: #FEFDFE;
          top: 0.05rem;
          left: 0.06rem;
          border-radius: 50%;
        }
        img{
          display: block;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
          // position: absolute;
          // left: 0;
          //top: 0.15rem;
          width: 100%;
        }
      }
    }
    
    // 歌曲名称歌手名称
    .song-mes,.song-mes-tit{
      width: 100%;
      //background-color: greenyellow;
      margin-bottom: 0.2rem;
      .title{
        margin-top: 0.3rem;
        text-align: center;
        //font-weight:bold;
        //color:rgba(68,68,68,1);
        //font-size: 0.30rem;
        margin-bottom: 0.1rem;
      }
      .txt{
        opacity: 0.5;
        //font-size: 0.28rem;
        text-align: center;
        font-weight:500;
        //color:rgba(153,153,153,1);
      }
    }
    .song-mes-tit{
      margin-bottom: 0;
    }
    // 图标内容
    .icons{
      //background-color: #7408B4;
      width: 100%;
      height: 0.48rem;
      position: absolute;
      bottom: 2.5rem;
      padding: 0 1.23rem 0 1.18rem;
      box-sizing: border-box;
      img,div{
        position: relative;
        width: 0.48rem;
      }
      div .vip{
        position: absolute;
        display: inline-block;
        width: 0.32rem;
        height: 0.32rem;
        margin-left: 0.32rem;
        top: 0.3rem;
      }
      img:nth-child(4){
        width: 0.1rem;
      }
    }
    .bottom{
      width: 100%;
      height: 2.2rem;
      // line-height: 2.2rem;
      position: absolute;
      //padding: 0 0.38rem 0 0.44rem;
      
      //box-sizing: border-box;
      left: 0;
      bottom: 0;
      .progress{
        padding: 0 0.3rem;
        box-sizing: border-box;
        width: 100%;
        height: 0.5rem;
        //background-color: #E9D7F3;
        .progress-bar-wrapper{
          width: 5rem;
          //background-color: greenyellow;
          height: 100%;
          .aplayer{
            .aplayer-body{
              .aplayer-pic{
                display: none!important
              }
            }
          }
          
          
        }
        .left,.right{
          color: rgba(255, 255, 255, 0.5);
        }
      }
      .playbtn{
        padding: 0 0.4rem;
        box-sizing: border-box;
        height: 1.5rem;
        //background:rgba(250,250,250,1);
        img{
          width: 0.48rem;
        }
        img:nth-child(3){
          width: 1.24rem;
          border: 0.01rem solid #999;
          border-radius: 50%;
          height: 1.24rem;
        }
      }
      
    }
    // 歌词详情样式设置
    .middle{
      //background-color: blue;
      position: fixed;
      width: 100%;
      top: 1.5rem;
      bottom: 2.5rem;
      white-space: nowrap;
      font-size: 0.3rem;
      .middle-l{
        display: inline-block;
        vertical-align: top;
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 80%;
        .cd-wrapper{
          position: absolute;
          left: 10%;
          top: 0;
          width: 80%;
          height: 100%;
          .cd{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 0.1rem solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;

          }
        }
        .playing-lyric-wrapper{
          width: 80%;
          margin: 0.3rem auto 0 auto;
          overflow: hidden;
          text-align: center;
          .playing-lyric{
            height: 0.2rem;
            line-height: 0.2rem;
            font-size: 0.24rem;
            color: greenyellow;
          }
        }
      }
      .middle-r{
        //background-color: red;
        //display: inline-block;
        vertical-align: top;
        width:100%;
        height: 100%;
        overflow: hidden;
        .lyric-wrapper{
           width: 80%;
            margin: 0 auto;
            overflow: hidden;
            text-align: center;
            .text{
              opacity: 0.5;
              line-height: 0.7rem;
              color: #fff;
              font-size: 0.32rem;
            }
            .current{
              color: #fff;
              opacity: 1;
            }
        }
      }
    }
    .playtype{
      width: 2rem;
      height: 2.1rem;
      position: fixed;
      z-index: 999;
      bottom: 1.2rem;
      left: 0.24rem;
      overflow: hidden;
      border-radius: 0.1rem;
      background-color: rgba(73, 53, 65, 0.9);
      .space-between{
        width: 100%;
        height: 33.3%;
        padding: 0 0.3rem;
        box-sizing: border-box;
        img{
          width: 0.32rem;
          height: 0.32rem;
        }
      }
      .current{
        background-color: #e9d7f3
      }
    }
}
</style>

